<template>
  <el-container>
    <el-aside width="180px">
      <el-tabs tab-position="left" style="" @tab-click="handleAreaClick">
        <el-tab-pane label="全部"></el-tab-pane>
        <el-tab-pane v-for="a in areas" :key="a.id" :name="String(a.id)" :label="a.area"></el-tab-pane>
      </el-tabs>
      <!-- <el-menu class="el-menu-demo" mode="horizontal">
        <el-menu-item :index="index" v-for="(a,index) in areas" :key="index">{{a.area}}</el-menu-item>
      </el-menu> -->
    </el-aside>
    <el-main>
       <!--搜索表单-->
      <el-form :inline='true' :model='searchForm' class='demo-form-inline'>
            <el-form-item label='名称'>
                <el-input size='small' v-model='searchForm.name' placeholder='请输入站点名'></el-input>
            </el-form-item>
            <!-- <el-form-item label='状态'>
                <el-select size='small' v-model='searchForm.status' placeholder='请选择'>
                <el-option label='开启' value='1'></el-option>
                <el-option label='禁用' value='2'></el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item>
                <el-button @click='search' type='warning' size='small' icon='el-icon-search'>查 询</el-button>
                <el-button @click='add' type='primary' size='small' icon='el-icon-plus'>新 增</el-button>
            </el-form-item>
        </el-form>
      <!-- 搜索表单 -->
      <el-table fit border :data='tableData.list' v-loading="listLoading" style='width: 100%'>
        <el-table-column align='center' type='index' label='编号' width='50'>
                     <template slot-scope="scope">
            {{tableData.pageNumber!==1?scope.$index+1 +  tableData.pageSize * (tableData.pageNumber-1):scope.$index +  tableData.pageNumber}}
            </template>
        </el-table-column>
        <el-table-column label='分站名称'>
            <template slot-scope='scope'>
                {{scope.row.name}}
            </template>
        </el-table-column>
        <el-table-column prop='equipments' label='设备数量' width="80" >
        </el-table-column>
        <el-table-column label='状态' width='80'>
          <template slot-scope='scope'>
                <el-tag :type="scope.row.status=='1'?'success':'danger'"><span>{{scope.row.status=='1'?'开启':'禁用'}}</span></el-tag>
            </template>
        </el-table-column>
        <!-- <el-table-column label='描述'>
          <template slot-scope='scope'>
                <span>{{scope.row.des==null?'无':scope.row.des}}</span>
            </template>
        </el-table-column> -->
        <el-table-column label='更新时间' width="180">
          <template slot-scope='scope'>
             <span>{{scope.row.update_time==null?'暂无更改':scope.row.update_time}}</span>
            </template>
        </el-table-column>
        <el-table-column align='center' label='操作' width='300' >
            <template slot-scope='scope'>
                <el-button @click.native='edit(scope.$index)' size='mini' icon='el-icon-edit' type='primary'>编辑</el-button>
                <el-button @click='del(scope.$index)' size='mini' icon='el-icon-delete' type='danger'>删除</el-button>
                <el-button @click='detail(scope.$index)' size='mini'><i class='iconfont icon-xiangqing1' style="color:#409EFF"></i>&nbsp;设备列表 </el-button>
            </template>
        </el-table-column>
      </el-table>
      <div class='page'>
        <el-pagination  @current-change='handleCurrentChange' :current-page='tableData.pageNumber' :page-size='tableData.pageSize' layout='total, prev, pager, next, jumper' :total='tableData.totalRow'>
        </el-pagination>
      </div>
        <!-- <EditDialog :getData="getData" :dialogData='dialogData' :dialogVisible="dialogVisible" :title="title" :isCreate="isCreate"></EditDialog> -->
         <el-dialog :visible.sync="dialogVisible"  :before-close="handleClose" center :title="isCreate?title.titleAdd:title.titleEdit" width="488">
            <el-form  label-position="right" label-width="180px" :rules="rules" :model="dialogData" ref="dialogData">
                <el-form-item label="分站名:" prop="name">
                    <el-input class="Iwidth" v-model="dialogData.name"></el-input>
                </el-form-item>
                <!-- <el-form-item label="设备数:" prop="equipments">
                    <el-input class="Iwidth" v-model="dialogData.equipments"></el-input>
                </el-form-item> -->
                <el-form-item label="地区:" prop="status">
                  <el-select v-model="dialogData.indentify_id">
                    <el-option
                      v-for="item in areas"
                      :key="item.id"
                      :label="item.area"
                      :value="item.id">
                    </el-option>
                    <!-- <el-option label="开启" value='1' key='1'></el-option>
                    <el-option label="禁用" value='2' key='2'></el-option> -->
                  </el-select><el-button type="text" circle @click="areaManager">管理</el-button>
                </el-form-item>
                <!-- <el-form-item label="备注:" prop="des">
                    <el-input class="Iwidth" v-model="dialogData.des"></el-input>
                </el-form-item> -->
            </el-form><span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
                <el-button v-show="!isCreate" @click="update(1)" size="mini" type="primary">修 改</el-button>
                <el-button v-show="isCreate" @click="update(2)" size="mini" type="primary">保 存</el-button>
            </span>
        </el-dialog>
    </el-main>
  </el-container>

</template>
<script>
import fetch from '@/utils/fetch'
import {
  getstationInfo,
  updateStationInfo,
  addStationInfo,
  delStation
} from '@/api/table'
var page = 1
export default {
  props: {},
  data() {
    return {
      searchForm: {
        // 搜索表单de数据
        areaId: null,
        name: '',
        status: null
      },
      listLoading: false,
      title: {
        titleAdd: '添加分站',
        titleEdit: '编辑分站'
      },
      tableData: {}, // 表格数据及分页数据
      dialogData: {
        // 编辑的dialog表单
        name: '',
        address: '',
        manager: '',
        phone: '',
        status: 1,
        des: ''
      },
      rules: {
        name: [{ required: true, message: '不能为空', trigger: 'blur' }]
      },
      dialogVisible: false,
      isCreate: false,
      status: 1,
      statusOptions: [
        {
          value: 1,
          label: '开启'
        }, {
          value: 2,
          label: '禁用'
        }
      ],
      areas: []
    }
  },
  created() {
    this.getAreas()
    this.getData()
  },
  methods: {
    handleAreaClick(tab, event) {
      this.searchForm.areaId = tab.name
      fetch.get('/station/getStationsByArea', { params: { areaId: tab.name }}).then(res => {
        this.tableData = res.content
        this.listLoading = false
      })
    },
    getAreas() {
      // 获取站点列表
      this.listLoading = true
      fetch.get('/getAllArea').then(res => {
        this.areas = res.content
        this.listLoading = false
      })
    },
    getData(val = 1) {
      // 获取表数据
      // debugger
      var p = {
        name: this.searchForm.name,
        status: this.searchForm.status,
        areaId: this.searchForm.areaId,
        pageNumber: val
      }
      this.listLoading = true
      fetch.get('/station/getStationsByArea', { params: p }).then(res => {
        this.tableData = res.content
        this.listLoading = false
      })
    },
    handleCurrentChange(val) {
      // debugger
      this.getData(val)
    },
    search() {
      // console.log(this.searchForm);
      this.getData()
    },
    edit(index) {
      var id = this.tableData.list[index].id
      // console.log(index);
      getstationInfo(id).then(res => {
        // console.log(
        typeof this.dialogData.status + ' ... ' + typeof res.content.status

        this.dialogVisible = true
        this.dialogData = res.content
        this.isCreate = false
      })
    },
    add() {
      this.status = 1
      this.dialogData = {}
      this.dialogVisible = true
      this.isCreate = true
    },
    del(index) {
      // console.log(this.tableData.list[index].id);
      this.$confirm('确认删除?')
        .then(_ => {
          delStation(this.tableData.list[index].id)
            .then(res => {
              this.$message({
                showClose: true,
                message: '删除成功',
                type: 'success'
              })
              this.getData()
            })
            .catch(error => {
              console.log(error)
            })
        })
        .catch(_ => {
          this.$message({
            showClose: true,
            message: '取消删除',
            type: 'warning'
          })
        })
    },
    detail(index) {
      // console.log(index);
      var station_id = this.tableData.list[index].id
      this.$router.push({ path: 'TerminalManager', query: { station_id }})
    },
    update(val) {
      this.$refs.dialogData.validate(valid => {
        if (valid) {
          this.$confirm('确认保存？')
            .then(_ => {
              if (val === 1) {
                var p1 = {
                  'station.id': this.dialogData.id,
                  'station.name': this.dialogData.name,
                  'station.indentify_id': this.dialogData.indentify_id
                }
                updateStationInfo(p1).then(res => {
                  // console.log(res);
                  // this.dialogData = {}
                  this.$message({
                    message: '恭喜你，修改成功！！！',
                    type: 'success'
                  })
                  // this.dialogVisible = false
                  this.dialogVisible = false
                  this.getData(page)
                })
              } else if (val === 2) {
                var p2 = {
                  'station.name': this.dialogData.name,
                  'station.indentify_id': this.dialogData.indentify_id
                }
                // console.log(val);
                addStationInfo(p2).then(res => {
                  this.$message({
                    message: '恭喜你，保存成功！！',
                    type: 'success'
                  })
                  this.dialogVisible = false
                  this.dialogData = {}
                  this.getData(page)
                })
              }
            })
            .catch(_ => {})
        } else {
          return false
        }
      })
    },
    handleClose(done) {
      this.dialogData = {}
      done()
    },
    areaManager() {
      this.$router.push('/page/AreasManager')
    }
  }
}
</script>
<style scoped>
.page {
  float: right;
  margin: 10px 0;
}
.el-card {
  margin: 5px;
}
</style>
